<template>
  <div class="top_ouin">
    <div class="top_left">
      <div class="top_img">
        <img src="../assets/imgs/home/yunhao_log.png" alt="" />
      </div>
    </div>
    <div class="top_yuansu">
      <div class="top_yuansu_in" >
        <router-link to="/home"  active-class="active" exact>首页</router-link>
      </div>
      <div class="top_yuansu_in">
        <router-link to="/solution" active-class="active" exact>解决方案</router-link>
      </div>
      <div class="product">
        <router-link to="/productsd" active-class="active" exact >产品介绍</router-link> 
        <div class="chanpingxiala">
          <span>产品模块</span>
          <div class="chanpingmokuai">
         <ul>
           <router-link v-focus to="/productsd/qht">
            <li>
               <div class="iconfont guanli"></div>
             <b>智慧管理</b>
              <p class="chanpingmokuai_p">无纸化智慧管理系统，便捷高效</p>
            </li>
            </router-link>

            <router-link to="/productsd/ip">
            <li>
               <div class="iconfont ip2"></div>
                <b>IP打造</b>
                 <p class="chanpingmokuai_p">宣传推广，社交互动，私域流量</p>
            </li>
            </router-link>

            <router-link  to="/productsd/mbmh">
            <li>
               <div class="iconfont wangluochuanbo"></div>
                <b>社交电商</b>
                <p class="chanpingmokuai_p">万店联盟，资源多渠道持续变现</p>
            </li>
            </router-link>
         </ul>
          </div>
           <div class="chanpingzaopian">
         <img src="../assets/imgs/product/dropmenu_ikon.png" alt="">

         </div>
          <div class="chanpingtupian"></div>
        </div>
      </div>
      <div class="top_yuansu_in" >
       <router-link to="/marketing" active-class="active" exact>营销工具</router-link> 
        </div>
      <div class="top_yuansu_in" @click="consult">
        <router-link to="/">最新咨询</router-link> 
        </div>
      <div class="top_yuansu_in"  @click="consult" >
        <router-link to="/about_a" active-class="active" exact>关于我们</router-link>
        </div>
    </div>
    <div class="top_right">
      <div class="top_right_button">注册</div>
      <div class="top_right_button1">
        登录
        <div class="xiala">
          <ul>
            <li><a href="http://login.cloudvast.com/login">企汇通</a></li>
            <li><a href="http://login.cloudvast.com/login">企汇通备线</a></li>
            <li><a href="http://login.cloudvast.com/login">企汇通营销版备线</a></li>
            <li><a href="http://login.cloudvast.com/login">云梯</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  name: "Hometop",
  methods:{
     consult(){
        alert('暂未开通');
     }
  }
};
</script>
<style scoped>
.top_ouin {
  width: 100%;
  height: 100px;
  float: left;
  position: relative;
  top: 0%;
}
.top_ouin .top_left .top_img {
  position: absolute;
  top: 19px;
  margin-left: 188px;
  width: 180px;
  height: 61px;
}

.top_ouin .top_yuansu {
  width: 850px;
  height: 100px;
  float: left;
  margin-left: 445px;
  line-height: 100px;
}
.top_ouin .top_yuansu .top_yuansu_in {
  float: left;
  box-sizing: border-box;
  margin-left: 55px;
  font-size: 22px;
  line-height: 100px;
}
.top_ouin .top_yuansu .product {
  float: left;
  box-sizing: border-box;
  margin-left: 55px;
  font-size: 22px;
  line-height: 100px;
}
.top_yuansu .product:hover .chanpingxiala{
   height: 305px;
}

.top_ouin .product .chanpingxiala {
  width: 100%;
  height: 0px;
  background-color: #fff;
  position: absolute;
  top: 100px;
  left: 0px;
  transition: 0.5s;
 overflow: hidden;
 z-index: 2;
}

.top_ouin .top_yuansu .chanpingxiala span {
  height: 30px;
  position: absolute;
  color: #c0c0c0;
  font-weight: 500;
  font-size: 20px;
  top: 15px;
  left: 303px;
  text-align: left;
}
.top_ouin .top_yuansu .product .chanpingxiala .chanpingmokuai {
  width: 939px;
  height: 120px;
  position: absolute;
  top: 84px;
  left: 303px;
  border-top: 1px dashed #d4a5ff;

}
.chanpingmokuai ul{
  display: flex;
  flex-flow: row nowrap;
}
.chanpingmokuai ul li:nth-child(1){
  margin-left: 30px;
}
.chanpingmokuai ul li{
   list-style-type: none;
   width: 202px;
   height: 55px;
   float: left;
   margin-right: 110px;

}
.chanpingmokuai ul li .iconfont{
    margin-right: 0.57142857rem;
    line-height: 3.78571429rem;
    font-size: 2.78571429rem;
    color: #9B88EC;
    position: relative;
    top: 9%;
    left: -27%;
}

.chanpingmokuai ul li b{
   position: absolute;
   top:-20px;
   font-size: 18px;
   color: #6D6C6C;
   font-weight: 500;
}
.chanpingmokuai ul li p{
    color: #7F7F7F;
   font-size: 14px;
   position: absolute;
   top: 0px;
}
.chanpingzaopian img{
   position: absolute;
   top: 20px;
   right: 145px;
   
}
.top_ouin .top_right {
  width: 250px;
  height: 100px;
  float: left;
  margin-left: 200px;
}

.top_ouin .top_right .top_right_button {
  width: 93px;
  height: 46px;
  border: 1px none #000;
  float: left;
  line-height: 46px;
  margin-top: 30px;
  margin-right: 30px;
  font-size: 22px;
  text-align: center;
  border-radius: 25px;
  color: #ffff;
  background-color: #4a96ea;
}
.top_ouin .top_right .top_right_button1 {
  width: 93px;
  height: 46px;
  float: left;
  line-height: 46px;
  margin-top: 30px;
  margin-right: 30px;
  font-size: 22px;
  text-align: center;
  border-radius: 25px;
  color: #4a96ea;
  border: 2px solid #4A96EA;;
}
.top_ouin .top_right .top_right_button1 .xiala {
  width: 248px;
  height: 0px;
  border-radius: 25px;
  position: absolute;
  top: 77px;
  right: 160px;
  transition: 0.4s;
  overflow: hidden;
  background-color: #fff;
  z-index: 2;
}
.top_ouin .top_right .top_right_button1:hover .xiala {
  height: 315px;
}
.top_ouin .top_right .top_right_button1 .xiala ul {
  position: absolute;
  left: 0px;
  top: 0px;
}
.top_ouin .top_right .top_right_button1 .xiala ul li {
  margin-left: 33px;
}
.top_ouin .top_right .top_right_button1 .xiala ul li:nth-child(1){
  margin-top:29px;
}
.top_ouin .top_right .top_right_button1 .xiala ul li a {
  text-decoration: none;
  color: #000;
  font-weight: lighter;
  line-height: 60px;
}
.active{
    position: relative;
}
.active{
  color: #4A96EA;
}
.active::before{
 position: absolute;
    top: 40px;
    left: 9px;
    content: '';
    display: block;
    width: 65px;
    height: 4px;
    background-color: #4A96EA;
    border-radius: 25px;
}
.top_yuansu_in:nth-child(1) .active::before{
        position: absolute;
    top: 40px;
    left: -9px;
    content: '';
    display: block;
    width: 59px;
    height: 4px;
    background-color: #4A96EA;
    border-radius: 25px;   
}

</style>

